<template>
	<view class="fistView">
		<view class="headView"></view>
		<view class="cardView">
			<uni-card class="infoView" :is-shadow="false">
				<u--input class="phoneInput" placeholder="请输入手机号码" prefixIcon="../../../static/images/手机.png" clearable
					prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				<u--input class="yanzhengInput" placeholder="输入验证码" prefixIcon="../../../static/images/验证 验证码.png">
				
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取哈哈哈"></u-code>
						<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
					</template>
			
				</u--input>
				

				<view class="u-page__button-item">
					<u-button style="height: 80rpx; border-radius: 40rpx;" text="提交" size="normal" color="rgb(10, 185, 156)"></u-button>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style>
	.headView {
		height: 300rpx;
		background-color: #ff7500;
	}

	.cardView {
		margin-top: -280rpx;
	}

	.cardView .updateImage {
		/* background-color: rebeccapurple; */
		display: flex;
		align-items: center;
	}

	.infoView {
		border-radius: 30rpx;
	}
	.cardView .infoView .phoneInput{
		height: 60rpx;
		border-radius: 60rpx;
		margin-bottom: 40rpx;
		margin-top: 40rpx;
	}
	.cardView .infoView .yanzhengInput{
		height: 60rpx;
		border-radius: 60rpx;
		margin-bottom: 40rpx;
	}
	.cardView .infoView .u-page__button-item{
		
		margin: 80rpx auto; 
		width: 500rpx;
	}
</style>